<template>
	<e-popup :show="show" mode="bottom" @close="$emit('close')">
		<view class="popup-box" @tap.stop >
			<image class="close-btn img-40" :src="$staticPath('classify/close.png')" @tap.stop="$emit('close')"></image>
			<view class="text-center e-font-32 fw-600 ">· {{ $t('classify.基础服务') }} ·</view>
			<view class="e-m-t-60 e-flex e-flex-items-stretch" v-for="(item, index) in info.productRightsInterests" :key="index">
				<view class="serve-icon e-rela"></view>
				<view class="e-flex-1">
					<view class="fw-600 e-m-b-10">
						{{ item.name }}
					</view>
					<view class="c-77">
						{{ item.content }}
					</view>
				</view>
			</view>
			<view class="e-m-t-60">
				<e-button type="primary" shape="circle" :text="$t('classify.我知道了')" @click="$emit('close')"></e-button>
			</view>
		</view>
	</e-popup>

</template>

<script>
	import {mapState } from 'vuex'
export default {
	props: {
		info: Object,
		show: Boolean
	},
	computed:mapState({
			AppSkin: state => state.init.skin
		})
}
</script>

<style lang="scss" scoped>
.c-77 {
	color: #777;
}
.popup-box {
	padding: 52rpx 32rpx 0 32rpx;
	border-radius: 32rpx 32rpx 0 0;

	.close-btn {
		position: absolute;
		top: 40rpx;
		right: 32rpx;
	}
	.serve-icon {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		margin-right: 28rpx;
		border: 2rpx solid var(--color-primary);
		&::after,
		&::before{
			content: '';
			position: absolute;
			background: var(--color-primary);
			width: 2rpx;
			bottom: 8rpx;
		}
		&::after{
			height: 16rpx;
			right: 12rpx;
			transform: rotate(45deg);
		}
		&::before{
			height: 10rpx;
			left: 12rpx;
			transform: rotate(-45deg);
		}
	}
}
</style>
